<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8"/>
        <title>Journey through Space: A 3rd grade science learning module</title>
        <script src="scripts/SCORM_API_wrapper.js" language="javascript"></script>
        <script src="scripts/sessionstorage.1.4.js" language="javascript"></script>
        <script src="scripts/scripts.js" language="javascript"></script>
        <script src="scripts/rockyhsscripts.js" language="javascript"></script>
        <link href="styles/styles.css" type="text/css" rel="stylesheet"/>
        <link href="styles/hsstyles.css" type="text/css" rel="stylesheet"/>
    </head>
    
    <body onload="javascript:visitTerresterial()">
        <div>
            <div>
                <table id="indextable">
                    <tr>
                        <td align="center"><img src="images/mercurytoon.png" height="20px" width="20px"/></td>
                        <td align="center"><img src="images/venustoon.png" height="20px" width="20px"/></td>
                        <td align="center"><img src="images/earthtoon.png" height="20px" width="20px"/></td>
                    </tr>
                        <td align="center"><img src="images/marstoon.png" height="20px" width="20px"/></td>
                        <td align="center"><img src="images/suntoon.png" height="20px" width="20px"/></td>
                        <td align="center"><img src="images/jupitertoon.png" height="20px" width="20px"/></td>
                    <tr>
                        <td align="center"><img src="images/saturntoon.png" height="20px" width="45px"/></td>
                        <td align="center"><img src="images/uranustoon.png" height="20px" width="30px"/></td>
                        <td align="center"><img src="images/neptunetoon.png" height="20px" width="20px"/></td>
                    </tr>
                </table>
            </div>
                            
            <div id="headerimage">
                <a name="top">
                <img src="images/header.jpg"
                    alt="image of module title - Journey through Space: a 3rd grade science learning module"
                    title="image of module title - Journey through Space: a 3rd grade science learning module"
                    width="82%"/>
                </a>
            </div>
        </div>
        
        <div id="nav">
            <div id="nav_wrapper">
                <ul>
                    <li><a class="show" href="welcome.html">Welcome!</a>
                    </li>
                    <li><a class="show" href="sun.html">The Sun</a>
                    </li>
                    <li><a class="show" href="#">Rocky Planets</a>
                        <ul>
                            <li><span class="menu-link-inactive" class="show" href="terresterial.html">Rocky Planet Intro</span>
                            </li>
                            <li><a class="show" href="mercury.html">Mercury</a>
                            </li>
                            <li><a class="show" href="venus.html">Venus</a>
                            </li>
                            <li><a class="show" href="earth.html">Earth</a>
                            </li>
                            <li><a class="show" href="mars.html">Mars</a>
                            </li>
                            <li><a class="hide" id="terresterialquizlink" href="terresterialquiz.html">Rocky Planets Quiz</a>
                            </li>
                        </ul>
                    </li>
                    <li><a class="show" href="moon.html">The Moon</a>
                    </li>
                    <li><a class="show" href="asteroid.html">Asteroid Belt</a>
                    </li>
                    <li><a class="show" href="#">Gas Giants</a>
                        <ul>
                            <li><a class="show" href="gaseous.html">Gas Giants Intro</a>
                            </li>
                            <li><a class="show" href="jupiter.html">Jupiter</a>
                            </li>
                            <li><a class="show" href="saturn.html">Saturn</a>
                            </li>
                            <li><a class="show" href="uranus.html">Uranus</a>
                            </li>
                            <li><a class="show" href="neptune.html">Neptune</a>
                            </li>
                            <li><a class="hide" id="gaseousquizlink" href="gaseousquiz.html">Gas Giants Quiz</a>
                            </li>
                        </ul>
                    </li>
                    <li> <a class="hide" id="finalquizlink" href="endquiz.html">Final Quiz</a>
                    </li>
                    <li> <a class="hide" id="certificate" href="certificate.html">Certificate</a>
                    </li>
                </ul>
            </div>
            <!-- Nav wrapper end -->
        </div>
        <!-- Nav end -->
        
        <div>
            <article>
                <header>
                    <table align="center">
                        <tr>
                            <th><img src="images/satelliteflip.jpg" height="50px" width="50px"/></th>
                            <th><h1>Introduction to the Rocky Planets</h1></th>
                            <th><img src="images/satellite.jpg" height="50px" width="50px"/></th>
                        </tr>
                    </table>
                </header>
                
                <aside>
                    <table>
                        <tr>
                            <img src="images/innerplanets.jpg"
                                alt="Image of the Terresterial Planets including the Moon."
                                title="Image of the Terresterial Planets including the Moon."/>
                        </tr>
                        <tr>
                            <p>The four innermost planets of our solar system are known as the rocky 
                                planets, or terresterial planets.</p>
                        </tr> 
                        <tr>
                            <img src="images/innerplanets2.jpg"
                                alt="A to scale model comparing the sizes of the terresterial planets."
                                title="A to scale model comparing the sizes of the terresterial planets."/>
                        </tr>
                        <tr>
                            <p>This picture depicts the size difference between the four terresterial 
                                planets.</p>
                        </tr>
                    </table>
                 </aside>
                
                <section>
                    <div id="transcript" class="center">
                        <audio controls>
                            <source src="audio/terrestrial.mp3" type="audio/mpeg">
                            <source src="audio/terrestrial.ogg" type="audio/ogg">
                            <source src="audio/terrestrial.wav" type="audio/wav">
                        </audio>
                        <p><strong>Audio Transcript:</strong> Let's explore the Terresterial Planets.</p>
                    </div>
                    
                    <h3>Rocky Planet's Remarkable Vocabulary</h3>
                        <p>Hover your mouse over each item to learn its definition.</p>
                
                        <table>
                            <div id="hotspots">
                                <tr>
                                    <td>
                                        <div class="column">
                                            <div id="hs1" class="hotspot" 
                                                onmouseover="javascript:showText( 1 )"
                                                onmouseout="javascript:hideOutput()"><p>Eccentric Orbit</p></div> 
                                        </div>
                                    </td>
                                    <td>
                                        <div class="column">
                                            <div id="hs2" class="hotspot" 
                                                onmouseover="javascript:showText( 2 )"
                                                onmouseout="javascript:hideOutput()"><p>Gravitational Pull</p></div>  
                                        </div>
                                    </td>
                                    <td>             
                                        <div class="column">        
                                            <div id="hs3" class="hotspot"
                                                onmouseover="javascript:showText( 3 )"
                                                onmouseout="javascript:hideOutput()"><p>Gravity</p></div> 
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <div class="column">
                                            <div id="hs4" class="hotspot" 
                                                onmouseover="javascript:showText( 4 )"
                                                onmouseout="javascript:hideOutput()"><p>Greenhouse Effect</p></div>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="column">
                                            <div id="hs5" class="hotspot" 
                                                onmouseover="javascript:showText( 5 )"
                                                onmouseout="javascript:hideOutput()"><p>Magnetic Field</p></div>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="column">
                                            <div id="hs6" class="hotspot" 
                                                onmouseover="javascript:showText( 6 )"
                                                onmouseout="javascript:hideOutput()"><p>Sustainable</p></div>
                                        </div>
                                    </td>
                                </tr>
                                <tr>    
                                    <td>
                                        <div class="column">
                                            <div id="hs7" class="hotspot" 
                                                onmouseover="javascript:showText( 7 )"
                                                onmouseout="javascript:hideOutput()"><p>Radiation</p></div>
                                        </div>
                                    </td>
                                </tr>
                            </div>
                        </table>
                        
                        <div id="output">
                            <div id="output-box">
                                <p id="output-text">asdf</p>
                            </div>
                        </div>
                    <p>The four planets that are closest to the Sun are known as the rocky planets, or 
                        terrestrial planets. These planets are Mercury, Venus, Earth and Mars. All 
                        rocky planets have characteristics that are similar to Earth such as valleys, 
                        craters and volcanoes. Earth's Moon is also similar to the rocky planets.</p>
                
                    <a href="#top">Back to top</a>
                </section>
            </article>
        </div>
        
        <div>
            <footer>
                <cite>All information was collected from 
                    <a href="http://www.merriam-webster.com">Merriam Webster Online: 
                        Dictionary and Thesaurus</a>, 
                    <a href="http://www.nationalgeographic.com/">National Geographic</a>, 
                    <a href="http://www.wikipedia.org">Wikipedia</a>, 
                    <a href="http://www.nasa.gov">NASA</a>, 
                    Etsy - Pretty Grafik Design</a>, &amp Etsy - Paula Kim Studio</a>
                </cite>
            </footer>
        </div>
    </body>
</html>
